<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>预约地址</title>
    <link rel="stylesheet" href="../css/page-health-orderInfo.css" />
    <link rel="stylesheet" href="../css/cw-input-select.css" />
    <link rel="stylesheet" href="../plugins/elementui/index.css" />
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../js/cw-input-select.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/datapicker/datePicker.js"></script>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script>
        var id = getUrlParam("id");//根据URL地址栏中的参数名称获取对应的值
    </script>

    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }

        #allmap {
            height: 100%;
            width: 100%;
        }

    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=KyKYGhKT1DYisflH6Lk8OeGxEUYrFKRS"></script>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app" class="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">传智健康</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>
    <!-- 页面内容 -->
    <div class="contentBox">
        <div id="allmap"></div>
    </div>
</div>
<script type="text/javascript">
    (function(){

        // 百度地图API功能
        function G(id) {
            return document.getElementById(id);
        }
        var map = new BMap.Map("allmap",{enableMapClick:false});
        //var myValue;
        var mk ;
        var local=null;
        let butten =window.parent.document.getElementById("butten"); //搜索位置
        let address =window.parent.document.getElementById("addAddress");//添加地址
        let latitudeAndLongitude = window.parent.document.getElementById("addLatitudeAndLongitude");
        var geolocation = new BMap.Geolocation();
        var gc = new BMap.Geocoder();//创建地理编码器
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                point = new BMap.Point(r.point.lng,r.point.lat);
                map.centerAndZoom(point, 15);
            }
            showInfo(r);
        });

        map.enableScrollWheelZoom();//开启鼠标滚轮缩放
        function myFun() {
            var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp)); //添加标注
        }

        function showInfo(e){
            latitudeAndLongitude.value= e.point.lng + ',' + e.point.lat;
            gc.getLocation(e.point, function(rs){
                var addComp = rs.addressComponents;
                var site = addComp.province +addComp.city +addComp.district + addComp.street + addComp.streetNumber;
                address.value=site;
            });
            map.clearOverlays(); //清除地图上所有覆盖物
            mk = new BMap.Marker(e.point);
            map.addOverlay(mk);
            map.panTo(e.point);

        }
        butten.addEventListener("click", function() {//点击搜索
            map.clearOverlays(); //清除地图上所有覆盖物
            local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });

            let sear =address.value;
            local.search(sear);

            // 将地址解析结果显示在地图上,并调整地图视野
            gc.getPoint(sear, function(point){
                if (point) {
                    latitudeAndLongitude.value  = point.lng +","+ point.lat;
                    map.centerAndZoom(point, 16);
                    map.addOverlay(new BMap.Marker(point));
                }else{
                    alert("您选择地址没有解析到结果!");
                }
            }, "合肥市");

        });
        map.addEventListener("click", function (e) {
            showInfo(e);
        });
    })();
</script>

<script>

    var vue = new Vue({
        el:'#app',
        data:{

        },

        mounted(){

        }
    });
</script>

    </body>
</html>